<template>
    <div class="app-container">
        <el-form inline>
            <el-form-item label="名称">
                <el-input></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: space-between;">
            <div id="myChart" style="width: 1000px;height:calc(100vh - 260px);"></div>
            <div class="table_box">
                <el-table :data="tableData">
                    <el-table-column type="index" label="序号" width="80px"></el-table-column>
                    <el-table-column prop="nickName" label="名称" ></el-table-column>
                    <el-table-column prop="totalNum" label="功德" ></el-table-column>
                </el-table>
            </div>
        </div>
        
    </div>
</template>
<script>
import { reactive, toRefs } from "vue"
import * as echarts from 'echarts';
import { getWechatUserTop10 } from '@/api/wechat/wechat_muyu'

export default {
    name: "temp",
    setup() {
        const data = reactive({
            title: "木鱼",
            tableData: [],
            labelList: [],
            valueList: [],
        })

        const initChart = () => {
            var myChart = echarts.init(document.getElementById('myChart'));
            var option = {  
                tooltip: {  
                    trigger: 'axis', // 触发类型，默认数据触发，可选为：'item'、'axis'  
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效  
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'  
                    }  
                },  
                xAxis: {  
                    type: 'category',  
                    data: data.labelList  
                },  
                yAxis: {  
                    type: 'value'  
                },  
                grid: {  
                    left: '3%', // 图表距离容器左侧的距离  
                    right: '4%', // 图表距离容器右侧的距离  
                    bottom: '3%', // 图表距离容器底部的距离  
                    top: '10%', // 图表距离容器顶部的距离  
                    containLabel: true // 是否包含坐标轴的刻度标签在内  
                },  
                series: [  
                    {  
                        data: data.valueList,  
                        type: 'bar',  
                        // 如果你想进一步调整柱子的宽度，可以通过下面的属性进行微调，但这不是固定宽度的直接设置  
                        barWidth: '35px' // 这并不总是有效，取决于ECharts版本和布局  
                    }  
                ]  
            };
            myChart.setOption(option);
        }

        const getTop = () => {
            getWechatUserTop10().then(res => {
                if(res.code == 200){
                    data.tableData = res.data || []
                    if(data.tableData.length > 0){
                        data.tableData.forEach(item => {
                            data.labelList.push(item.nickName || '')
                            data.valueList.push(item.totalNum || 0)
                        })
                    }else{
                        data.labelList = []
                        data.valueList = []
                    }
                    initChart()
                }
            })
        }

        onMounted(() => {
            getTop()  
        })

        return {
            ...toRefs(data)
        }
    }
};
</script>
<style lang="scss" scoped>
.table_box{
    width: 100%;
    flex: 1;
}
</style>